<!-- 进度 -->
<template>
  <div class="schedule" :style="{ width: width }">
    <!-- <p>完成度</p> -->
    <a-progress class="schedule-progress" size="small" :show-info="false" :percent="percentFun(percent)" />
    <p class="ml-16">{{ percentFun(percent) }}%</p>
  </div>
</template>

<script setup lang="ts">
  export interface ScheduleProps {
    // 宽度
    width?: string
    // 进度
    percent?: number
  }
  withDefaults(defineProps<ScheduleProps>(), {
    width: '179px',
    percent: 89.3
  })

  const percentFun = (percent: number): number => {
    return Number.isInteger(percent) ? percent : Number(percent.toFixed(2)) || 0
  }
</script>

<style lang="less" scoped>
  .schedule {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;

    .schedule-progress {
      transform: translateY(-2px);
    }

    > p {
      font-size: 14px;
      white-space: nowrap;
      color: @text03;
      line-height: 14px;
      font-weight: 400;
    }

    :deep(.ant-progress) {
      line-height: 14px;
    }

    :deep(.ant-progress-line) {
      margin: 0;
    }
  }
</style>
